<template>
	<view>
		<cu-custom bgColor="bg-white" :isBack="true"><block slot="content" class="text-000 text-black text-bold">确认订单</block></cu-custom>
		<!-- 影片信息开始 -->
		<view class="margin-top bg-white padding-top-lg margin-lr-sm radius-xl">
			<view class="flex margin-bottom-sm">
        <!--      左边图片-->
        <view class="margin-left margin-right" v-if="order" style="width:30%">
          <img :src="$tools.mThumb($config.movieImgDomain + order.show.poster,500)" style="width:180rpx;height:230rpx;" class=" radius"/>
        </view>
<!--        右边信息-->
        <view style="width:70%" >
<!--          上面标题-->
          <view class="flex justify-between">
            <view class="text-bold text-lg margin-bottom">{{order.show.show_name}}</view>
            <view>
              <text class="padding-lr-sm text-orange inline-block" style="border-radius:50rpx 0 0 50rpx;background-color:#FCEDDE;">
                <text class="iconfont icon-clock text-bold text-xl"></text>
                <text>04:55</text>
              </text>
            </view>
          </view>
<!--          下面信息-->
          <view class="text-gray text-sm">
            <view class="margin-bottom-xs">{{order.schedule.mark}}</view>
            <view class="margin-bottom-xs">{{order.cinemas.cinema_name}}</view>
            <view>{{order.schedule.hallName}}  {{order.order.seat_names}}</view>
          </view>
        </view>
      </view>
<!--      价格信息-->
      <view class="bg-white flex justify-between  padding-lr-sm padding-tb-sm solid-top">
        <view class="text-bold">平台立减</view>
        <view class="text-red">-￥3.2</view>
      </view>
      <view class="flex justify-between bg-white  solid-top padding-tb-lg">
        <view class="margin-left text-center text-bold"> <text class="cuIcon-roundclosefill margin-right-xxs"></text>不支持退票、改签</view>
        <view>
          <text class="text-gray">共{{order.order.total_num}}张，</text>
          <text class="margin-right text-sm text-bold">合计￥<text class="text-lg margin-lr-xxs">{{order.order.total_price}}</text>元</text>
        </view>
      </view>
		</view>
		<!-- 影片信息结束 -->
		
		<!-- 手机号码 -->
		<view class="flex justify-between margin-lr-sm radius bg-white margin-top-sm padding-bottom-sm" >
			<view class="margin-left margin-top-sm">
				<view class="text-bold margin-bottom-xs">{{user.phone}}</view>
				<view class="text-gray text-sm">手机号仅用于生成订单</view>
			</view>
<!--			<view class="margin-right text-gray margin-top">去绑定 <text class="cuIcon-right"></text></view>-->
		</view>
		
		<!-- 购票须知 -->
		<view class='margin-left-sm bg-white padding radius margin-top-sm' style="width:702rpx;height:460rpx">
			<view class="margin-bottom text-bold padding-bottom solid-bottom">购票须知</view>
			<view class="text-gray text-sm margin-top">
			    <view>1.请确认场次和时间 无误，购买成功后将不予退换</view>
				<view class="margin-top-sm">2.由于设备故障等不可抗力因素，存在少量场次取消的情况，会进行退票退款</view>
				<view class="margin-top-sm">3.由于影院系统不稳定等因素，存在出票失败的情况，会进行退款</view>
				<view class="margin-top-sm">4.取消码可以在“我的-待出票”中查看</view>
				<view class="margin-top-sm">5.下单即代表你同意<text class="text-red" @tap="$tools.goTo('/pages/article/agreement')">《有你用户服务协议》</text></view>
			</view>
		</view>
		
		<!-- 付款 -->
		<view class="response flex fixed-buttom justify-end bg-white padding-tb-sm padding-right shadow-lg">
			<view class="text-red margin-top-sm margin-right">￥<text class="text-lg margin-lr-xxs">{{order.order.pay_price}}</text>元</view>
			<view class="bg-red text-white payment radius" @tap="pay">立即付款</view>
		</view>
	</view>	
</template>

<script>
	export default {
		data() {
			return {
				options:'',
				order:''
			}
		},
    computed:{
		user(){
			return this.$user.user()
		}
      },
		async onLoad(options) {
			this.options = options
			let res    = await this.$api.orderConfirm({orderId:this.options.orderId})
			this.order = res.data
		},
		methods: {
			//支付
			async pay(){
				let res = await this.$api.orderPay({orderId:this.options.orderId});
				// console.log('获取支付参数')
				// console.log(res)
				// console.log(res.data.result.jsConfig)

				this.$thirdApi.pay(res.data.result.jsConfig).then(res=>{
					//支付成功
					// console.log(res.errMsg)
					//errMsg: "requestPayment:fail cancel"   //requestPayment:ok
					if(res && res.errMsg==='requestPayment:ok'){
						// console.log('支付成功')
						this.$tools.success('支付成功').then(res=>{
							this.$tools.goTo('/pages/order/success')
						})
					}else{
						// console.log('支付失败')
						this.$tools.msg('支付失败').then(res=>{
							this.$tools.goTo('/pages/order/failure')
						})
					}
				})
			}
		}
	}
</script>

<style>
.cancle{width:24rpx;height:24rpx}
.payment{width:176rpx;height:72rpx;border-radius: 36px;text-align:center;line-height:72rpx}
.total{position:fixed;bottom:10rpx;margin-left:400rpx}
</style>
